<template>
	<view class="container">
		<view class="tui-searchbox"  @tap="search">
			<view class="tui-search-input" >
				<tui-icon name="search" color="#333" :size="22"></tui-icon>
				<text class="tui-search-text">搜索</text>
			</view>
		</view>

		<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" :style="{height:height+'px'}">
			<view v-for="(item,index) in product_type_one_list" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
			 :data-current="index" @tap.stop="swichNav">
				<text>{{item.title}}</text>
			</view>
		</scroll-view>
		<block v-for="(item,index) in product_type_two_list" :key="index">
			<scroll-view scroll-y class="right-box" :style="{height:height+'px'}">
				<!--内容部分 start 自定义可删除-->
				<view class="page-view">
					<swiper indicator-dots autoplay circular :interval="5000" :duration="150" class="swiper">
						<swiper-item v-for="(ite,inde) in product_type_banner_list" :key="inde">
							<image :src="ite.image_url" class="slide-image" />
						</swiper-item>
					</swiper>
					<view class="class-box">
						<view class="class-item">
							<view class="class-name">{{item.title}}</view>
							<view class="g-container">
								<view class="g-box" v-for="(it,ind) in item.data_three" :key="ind" :data-id="it.id" :data-title="it.title" @tap="product_list_click">
									<image :src="it.image_url" class="g-image" />
									<view class="g-title">{{it.title}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--内容部分 end 自定义可删除-->
			</scroll-view>
		</block>
	</view>
</template>
<script>
	import tuiIcon from "@/components/icon/icon.vue"
	import Category from './category-model.js'   
	var category = new Category();  
	export default {
		components: {
			tuiIcon
		},
		data() {
			return {
				//商品一级分类
				product_type_one_list:[],
				//商品二级三级分类
				product_type_two_list:[],
				currentTab: 0, //预设当前项的值
				product_type_banner_list:[],
				height: 0, //scroll-view高度
				scrollTop: 0 //tab标题的滚动条位置
			}
		},
		onLoad: function(options) {
			uni.getSystemInfo({
				success: (res) => {
					let header = 92;
					// #ifdef H5
					header = 0;
					// #endif
					this.height = res.windowHeight - uni.upx2px(header)
				}
			});
			var that = this;
			that.product_type_banner();
			that.product_type_one();
		},
		onShow(){
			this.my();
		},
		methods: {
			//商品一级分类
			product_type_one(){
				var that = this;
				category.product_type_one_list((res)=>{
					if(res.code == 8888){
						that.product_type_one_list = res.data;
						category.product_type_two_list(res.data[0].id,(ret)=>{
							if(ret.code == 8888){
								that.product_type_one_list[0].product_type_two_list = ret.data;
								that.product_type_two_list = ret.data;
							}
						})
					}
				});
			},
			//分类轮播图
			product_type_banner(){
				var that = this;
				category.product_type_banner_list((res)=>{
					if(res.code == 8888){
						that.product_type_banner_list = res.data;
					}
				});
			},
			// 点击标题切换当前页时改变样式
			swichNav: function(e) {
				var that = this;
				let cur = category.get_data_set(e,'current');
				if (that.currentTab == cur) {
					return false;
				} else {
					that.currentTab = cur;
					if(that.product_type_one_list[cur].product_type_two_list){
						that.product_type_two_list = that.product_type_one_list[cur].product_type_two_list;
					}
					category.product_type_two_list(that.product_type_one_list[cur].id,(ret)=>{
						if(ret.code == 8888){
							that.product_type_one_list[cur].product_type_two_list = ret.data;
							that.product_type_two_list = ret.data;
						}
					})
					that.checkCor();
				}
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				let that = this;
				//这里计算按照实际情况进行修改，动态数据要进行动态分析
				//思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
				//数据很多可以多次if判断然后进行滚动距离计算即可
				if (that.currentTab > 7) {
					that.scrollTop = 500
				} else {
					that.scrollTop = 0
				}
			},
			//跳转搜索
			search(){
				category.navigate_to('../search/search')
			},
			product_list_click(e){ 
				var that = this;
				var product_type_id = category.get_data_set(e,'id');
				var product_type_name = category.get_data_set(e,'title');
				category.navigate_to('../product_list/product_list?product_type_id='+product_type_id+'&product_type_name='+product_type_name);
			},
			my(){
				category.my((res)=>{
					if(res.code==8888){
						if(res.data.status_num>99){
							res.data.status_num = '99';
						}
						if(res.data.cart_count>99){
							res.data.cart_count = '99';
						}
						if(res.data.status_num>0){
							uni.setTabBarBadge({
							  index: 3,
							  text:res.data.status_num
							})
						}else{
							uni.removeTabBarBadge({
							  index: 3
							})
						}
						
						if(res.data.cart_count>0){
							uni.setTabBarBadge({
							  index: 2,
							  text:res.data.cart_count
							})
						}else{
							uni.removeTabBarBadge({
							  index: 2
							})
						}
					}
				})
			}
		}
	}
</script>
<style>
	@import url("category.css");
</style>
